/* ==========================================================================
   📱 Mobile Global Styles (Extracted from style.css)
   ========================================================================== */

/* 0. 🌐 Global Fluid Typography & Resizing */
@media (prefers-reduced-motion: reduce) {
    body .theme-switch-label .ball {
        transition: none !important;
        view-transition-name: none;
    }
}

html {
    /* 核心：根据屏幕宽度自动缩放基准字体大小 (16px @ Desktop -> ~14px @ Mobile) */
    /* 这会让所有使用 rem 单位的元素（标题、间距等）自动随屏幕变小 */
    font-size: clamp(14px, 1vw + 12px, 18px);
}

/* 1. Layout Media Queries */
/* 1280px 以下及触屏常驻显示，桌面宽度再使用悬停显示。 */
@media (max-width: 1280px), (hover: none) {
    body .maers-admin-action-group {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body .maers-admin-action-group > .maers-admin-btn {
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

@media (max-width: 1024px) {

    /* 通用容器适配 (包括首页和其他页面) */
    body .container,
    body .home-container {
        padding-top: 60px !important;
        height: auto !important;
        min-height: 100vh;
        overflow-y: auto !important;
        overflow-x: hidden;
        padding-left: 15px !important;
        padding-right: 15px !important;
        /* 确保内容不会贴边 */
    }
}

@media (max-width: 768px) {

    /* 3. 首页特定适配 (Home Layout) - Reverted to Single Column */
    body .home-container .nav-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        /* 恢复单列 */
        gap: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    body .home-container .nav-card {
        flex-direction: row !important;
        /* 恢复横向布局 (图标左，文右) */
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 20px !important;
        height: auto !important;
        min-height: 100px !important;
        aspect-ratio: auto !important;
        /* 取消方形比例 */
    }

    body .home-container .card-icon {
        margin-bottom: 0 !important;
        margin-right: 20px !important;
        font-size: 2.5rem !important;
        /* 恢复大图标 */
    }

    body .home-container .card-title {
        font-size: 1.4rem !important;
        /* 恢复大标题 */
        margin-bottom: 5px !important;
    }

    body .home-container .card-desc {
        display: block !important;
        /* 恢复显示描述 */
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    /* 其他页面的通用卡片保持单列横向 */


    /* 2. 移动端减少大面积颜色重绘，主题滑块保留独立过渡。 */
    @media (max-width: 1024px) {

        /* [极致性能] 运行时彻底隐藏遮罩层 */
        /* 只保留初始 Loading 阶段 (由 flash-guard.js 控制)，切换主题时不再显示任何遮罩 */
        html:not(.js-loading) #theme-mask {
            display: none !important;
        }

        /* 减少卡片过渡，滑块位移动画由独立规则控制。 */
        html,
        body,
        .main-card,
        .category-card,
        .icon-btn,
        .back-btn,
        .theme-switch-label,
        .tech-pill,
        .photo-item,
        .playlist-window,
        .search-results {
            transition: none !important;
        }
    }

    @media (max-width: 1024px) {

        /* 1. 禁用毛玻璃：这是导致手机卡顿的元凶 */
        body .main-card,
        body .nav-card {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;

            /* 2. 移除大阴影：减少 GPU 渲染开销 */
            box-shadow: none !important;

            /* 3. 移除边框或简化 */
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
        }

        /* 4. 适配白昼模式边框 */
        html.light-mode .main-card,
        html.light-mode .nav-card {
            border: 1px solid rgba(0, 0, 0, 0.05) !important;
        }
    }

    /* 3. 📱 Compact Screen Optimizations (针对您的 360px 屏幕优化) */
    @media (max-width: 380px) {
        html {
            /* 针对 360px 宽度稍作缩小，确保内容更紧凑 */
            font-size: 13px !important;
        }

        body .container,
        body .home-container {
            /* 减少左右边距，增加内容显示区域 */
            padding-left: 10px !important;
            padding-right: 10px !important;
            padding-top: 50px !important;
        }

        body .nav-card {
            /* 更加紧凑的卡片布局 */
            padding: 15px 12px !important;
            min-height: 90px !important;
            gap: 12px !important;
            margin-bottom: 0 !important;
        }

        body .card-icon {
            font-size: 2rem !important;
            /* 32px */
        }

        body .card-title {
            font-size: 1.2rem !important;
            margin-bottom: 4px !important;
        }

        body .card-desc {
            font-size: 0.85rem !important;
            line-height: 1.3 !important;
        }

        body .brand-title {
            font-size: 2rem !important;
        }

        body .brand-logo {
            width: 70px !important;
            height: 70px !important;
            margin-bottom: 4px !important;
        }
    }
}